<template>
  <view class="coupon-page">
    <uv-tabs :list="tabs" :current="tab" @change="onTabChange" lineColor="#FF6B00" activeColor="#FF6B00" />

    <scroll-view
      class="list"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <uv-empty v-if="!loading && coupons.length===0" mode="coupon" text="暂无优惠券" />

      <view v-for="it in coupons" :key="it.id" class="card">
        <view class="left">
          <view class="price">
            <text class="cur">¥</text>
            <text class="num">{{ it.amount }}</text>
          </view>
          <view class="desc">满{{ it.threshold }}可用</view>
        </view>
        <view class="mid">
          <view class="name">{{ it.title }}</view>
          <view class="time">有效期：{{ it.start_time }} - {{ it.end_time }}</view>
          <view class="limit">{{ it.scope || '全场通用' }}</view>
        </view>
        <view class="right">
          <uv-button v-if="tab===0" type="primary" size="small" shape="circle" @tap="receive(it)" :loading="actioning">
            领取
          </uv-button>
          <uv-tags v-else :text="couponStatusText(it)" :type="couponStatusType(it)" size="mini" plain />
        </view>
      </view>

      <view class="pad" />
    </scroll-view>
  </view>
  
</template>

<script setup>
// 中文注释：优惠券列表（uv-ui）
import { ref, onMounted } from 'vue'
import { couponApi } from '@/api/index.js'

const tabs = ref([{ name: '可领取' }, { name: '我的' }])
const tab = ref(0)
const coupons = ref([])
const loading = ref(false)
const refreshing = ref(false)
const actioning = ref(false)

const fetchList = async () => {
  loading.value = true
  try {
    if (tab.value === 0) {
      const data = await couponApi.getCouponList()
      coupons.value = Array.isArray(data?.list) ? data.list : []
    } else {
      const data = await couponApi.getMyCoupons()
      coupons.value = Array.isArray(data?.list) ? data.list : []
    }
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
    if (refreshing.value) refreshing.value = false
  }
}

const onTabChange = ({ index }) => {
  tab.value = index
  fetchList()
}

const onRefresh = () => {
  if (refreshing.value) return
  refreshing.value = true
  fetchList()
}

const receive = async (it) => {
  if (actioning.value) return
  actioning.value = true
  try {
    await couponApi.receiveCoupon(it.id)
    uni.showToast({ title: '已领取', icon: 'none' })
    fetchList()
  } catch (e) {
    uni.showToast({ title: '领取失败', icon: 'none' })
  } finally {
    actioning.value = false
  }
}

const couponStatusText = (it) => {
  // 假设后端返回 status: available/used/expired
  if (it.status === 'used') return '已使用'
  if (it.status === 'expired') return '已过期'
  return '可使用'
}
const couponStatusType = (it) => {
  if (it.status === 'used') return 'warning'
  if (it.status === 'expired') return 'error'
  return 'success'
}

onMounted(fetchList)
</script>

<style scoped lang="scss">
.coupon-page { min-height: 100vh; background: $uni-bg-color-grey; }
.list { height: calc(100vh - 120rpx); padding: 16rpx; box-sizing: border-box; }

.card { display: flex; background: #fff; border-radius: 16rpx; padding: 22rpx; margin-bottom: 16rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.left { width: 180rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px dashed $uni-border-color; }
.price { display: flex; align-items: baseline; }
.cur { color: $uni-color-primary; font-weight: 700; }
.num { font-size: 44rpx; color: $uni-color-primary; font-weight: 800; margin-left: 4rpx; }
.desc { color: #999; font-size: 22rpx; margin-top: 6rpx; }
.mid { flex: 1; padding: 0 16rpx; min-width: 0; }
.name { font-size: 30rpx; color: #222; font-weight: 600; }
.time { margin-top: 6rpx; color: #666; font-size: 24rpx; }
.limit { margin-top: 4rpx; color: #999; font-size: 22rpx; }
.right { width: 160rpx; display: flex; align-items: center; justify-content: center; }
.pad { height: 40rpx; }
</style>
